<template>
  <view class="goods_detail">
	<!-- swiper -->
	<swiper :autoplay="true" :circular="true" :indicator-dots="true">
		<swiper-item v-for="(item,index) in goodsObj.pics" :key="index" @click="handlePrevewImage(item.pics_mid)">
			<image :src="item.pics_mid" mode="widthFix"></image>
		</swiper-item>
	</swiper>
	<!-- price -->
	<view class="goods_price">{{goodsObj.goods_price}}</view>
	<view class="goods_name_wrap">
		<view class="goods_name">{{goodsObj.goods_name}}</view>
    <view class="goods_collect" @click="onTapCollect">
			<view :class="isCollect?'iconfont icon-shoucang':'iconfont icon-shoucang1'"></view>
			<view class="collect_text">收藏</view>
		</view>
	</view>
	<!-- info -->
	<view class="goods_info">
		<view class="goods_info_title">图文详情</view>
		<view class="goods_info_content">
			<rich-text :nodes="goodsObj.goods_introduce"></rich-text>
		</view>
	</view>
	<!-- bottom tool -->
	<view class="btm_tool">
		<view class="tool_item">
			<view class="iconfont icon-kefu"></view>
			<view>联系客服</view>
			<button open-type="contact"></button>
		</view>
		<view class="tool_item">
			<view class="iconfont icon-fen_xiang"></view>
			<view>分享</view>
			<button open-type="share"></button>
		</view>
    
		<navigator open-type="switchTab" class="tool_item" url="/pages/cart/main">
			<view class="iconfont icon-cart-Empty"></view>
			<view>购物车</view>
		</navigator>

		<view class="tool_item btn_cart" @click="handleCartAdd">
			<view>加入购物车</view>
		</view>

		<view class="tool_item btn_buy">
			<view>立即购买</view>
		</view>
	</view>
</view>
</template>

<script>
import {request} from '@/utils/tools'

export default {
  data() {
    return {
      goodsObj: {},
      collectList: [],
      isCollect: false
    }
  },
  thisGoodsInfo: {},
  methods:{
    // 请求当前id商品详情
    async getGoodsDetail(goods_id) {
      console.log('detail页面请求',goods_id);
      let {data: res} = await request({url: "goods/detail",data: {goods_id}})
      console.log(res)
      const goodsObj = res.message
      this.thisGoodsInfo = res.message
      console.log('thisGoodsInfo',this.thisGoodsInfo)
        // 设置轮播图数据,价格,名字,详情,商品id
      this.goodsObj = {
        pics: goodsObj.pics,
        goods_price: goodsObj.goods_price,
        goods_name: goodsObj.goods_name,
        goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
        goods_id: goodsObj.goods_id
      }

      // 获取收藏列表
      let collectList = wx.getStorageSync('collectList') || []
      // .some数组中有一个满足则返回true
      this.isCollect = collectList.some(v => v.goods_id === this.goodsObj.goods_id)
    },
    // 轮播图预览大图
    handlePrevewImage(pics_mid) {
      // 构建数组,map不改变元数据
      const urls = this.goodsObj.pics.map(v => v.pics_mid)
      const current = pics_mid
      wx.previewImage({
        current: current, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      });
    },
    // 加入购物车
    handleCartAdd() {
      console.log('点击了加入购物车');
      // 1 读取缓存 --数组
      let cart = wx.getStorageSync('cart') || [];
      // 2 查找索引,收否有该id商品
      let index = cart.findIndex(v => v.goods_id === this.thisGoodsInfo.goods_id)
      if (index === -1) { // 如果不存在索引
        this.thisGoodsInfo.num = 1 // 则创建num属性
        this.thisGoodsInfo.check = true // 则创建选中状态
        cart.push(this.thisGoodsInfo)
      } else { // 存在
        cart[index].num++
      }
      wx.setStorageSync('cart', cart) // 写入缓存
      // 消息提醒
      wx.showToast({
        title: '加入成功',
        icon: 'success',
        mask: 'true'
      });
    },
    // 点击收藏
    async onTapCollect() {
      console.log('点击了收藏');
      let isCollect = false
      let collectList = wx.getStorageSync('collectList') || []
      console.log(collectList);
      // 获取当前收藏商品id
      let index = collectList.findIndex(v => v.goods_id === this.thisGoodsInfo.goods_id)
      // 如果index为-1,表示没有对应id
      if (index !== -1) { // 有就删除--取消收藏
        collectList.splice(index, 1)
        isCollect = false
        wx.showToast({
          title: '取消成功',
          icon: 'success',
          mask: true,
          success: (result) => {
          },
          fail: () => { },
        });
      } else { // 没有就增加--收藏
        collectList.push(this.thisGoodsInfo)
        isCollect = true
        wx.showToast({
          title: '收藏成功',
          icon: 'success',
          mask: true,
          success: (result) => {
          },
          fail: () => { },
        });
      }
      // 写入缓存
      wx.setStorageSync("collectList", collectList)
      this.setData({ isCollect })
    },
  },
  onLoad(options) {
    console.log("detail-onLoad")
    if(options.goods_id){
      console.log('详情页接收的goods_id',options)
      const {goods_id} = options
      this.getGoodsDetail(goods_id)
    }else{
      this.getGoodsDetail(57442)
    }
  },
  onShow() {
    console.log('onshow');
  }
}
</script>

<style lang='less' scope>
.goods_detail {
  swiper {
    width: 100vw;
    height: 40vh;
    text-align: center;
    // background-color: red;

    swiper-item {
      width: 100%;

      image {
        width: 70%;
      }
    }
  }
}

.goods_price {
  padding: 15rpx;
  font-size: 32rpx;
  color: var(--themeColor);
  font-weight: 600;
}

.goods_name_wrap {
  display: flex;
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  // 上下
  padding: 10px 0;

  .goods_name {
    flex: 5;
    font-size: 30rpx;
    color: #000;
    // 左右
    padding: 0 10px;

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .goods_collect {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #dedede;

    .icon-shoucang {
      color: orangered;
    }
  }
}

.goods_info {
  .goods_info_title {
    padding: 20rpx;
    font-size: 32rpx;
    color: var(--themeColor);
    font-weight: 600;
  }

  .goods_info_content {
    color: var(--themeColor);
  }
}

// 底部工具
.btm_tool {
  border: 1rpx solid #ccc;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 90rpx;
  display: flex;

  // 每一项
  .tool_item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    position: relative;

    button {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }

  // 购物车
  .btn_cart {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-weight: 600;
    background-color: #ffa500;
    color: #fff;
  }

  // 立即购买
  .btn_buy {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-weight: 600;
    background-color: #eb4450;
    color: #fff;

  }
}
</style>